<template>
  <a-modal
    :visible.sync="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    title="选择租户"
    width="496px"
    :footer="null"
    wrapClassName="choose-tenant-modal-container"
    @cancel="_handleCancel()"
  >
    <div class="modal-container-body">
      <div class="conditions-warp">
        <a-icon type="search" style="color: #89898b" />
        <a-input placeholder="输入关键字搜索" v-model="tenantName" />
      </div>
      <div class="list-container custom-scrollbar">
        <div
          class="tenant-list"
          :class="activeTenant.id == item.id && 'active'"
          v-for="item in tenantSource"
          :key="item.id"
          @click="chooseTenant(item)"
        >
          {{ item.tenantName }}
        </div>
      </div>
      <div class="footer-container" v-if="activeTenant.id">
        <a-button @click="_handleCancel()"> 取消 </a-button>
        <a-button type="primary" @click="_handleOk()"> 确定 </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
/**
 *
 * 选择租户【弹窗】
 *
 * */
import { mapGetters } from "vuex";
import { isEmptyObject, saveData, getMenuData } from "@/tools";

export default {
  name: "ChooseTenant",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["organization"]),
  },
  data() {
    return {
      tenantName: "",
      tenantSource: [],
      activeTenant: {},
    };
  },
  computed: {
    ...mapGetters(["tenantData", "tenant"]),
  },
  watch: {
    //租户列表
    tenantData: {
      handler(val) {
        this.tenantSource = val;
      },
      immediate: true,
      deep: true,
    },

    //当前选择的租户
    tenant: {
      handler(val) {
        let isEmpty = isEmptyObject(val);
        let { name: routeName } = this.$route;
        this.$emit("update:visible", isEmpty && routeName != "Login");
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //选择租户
    chooseTenant(tenant = {}) {
      if (this.activeTenant && tenant.id == this.activeTenant.id) {
        this.activeTenant = {};
      } else {
        this.activeTenant = tenant;
      }
    },

    //确定
    _handleOk() {
      let { activeTenant } = this;
      saveData("TENANT", activeTenant);
      saveData("ORGANIZATION", activeTenant);
      this.$store.dispatch("queryPermissionData").then((res) => {
        //数据看板
        let dataBoard = res.find((v) => v.menuType == 2) ?? {};
        saveData("DATA_BOARD", dataBoard);
        //菜单
        saveData("CURRENT_MENU", getMenuData(0));
      });
      this._handleCancel();
    },

    //取消
    _handleCancel() {
      this.$emit("update:visible", false);
      if (isEmptyObject(this.tenant)) {
        //返回登陆页
        this.$router.push({
          path: "/login",
          replace: true,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.choose-tenant-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .modal-container-body {
    height: 440px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .conditions-warp {
      padding: 14px 36px;
      flex-shrink: 0;
      position: relative;
      .anticon {
        position: absolute;
        left: 44px;
        z-index: 99;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
      }
      .ant-input {
        padding-left: 30px;
      }
    }
    .list-container {
      flex: 1;
      .tenant-list {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
        border-bottom: 1px solid #e8e8e8;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 20px;
        &:last-child {
          border: none;
        }
        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }
        &.active {
          color: #fff;
          background: var(--primary-color);
        }
      }
    }
    .footer-container {
      text-align: right;
      padding: 10px 20px;
      border-top: 1px solid #e8e8e8;
      button {
        margin-left: 16px;
      }
    }
  }
}
</style>
